<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     <h1>{{info}}</h1>
     <input type="button" value="测试异步请求get" @click="f1()">
     <input type="button" value="测试异步请求post" @click="f2()">
 </div>
 <script src="js/vue.js"></script>
 <script src="js/axios.min.js"></script>
 <script>
     let v = new Vue({
         el:"div",
         data:{
             info:"测试vue"
         },
         methods:{
             f1(){
                 //alert("疯狂星期四")
                 //发出异步get请求
                 axios.get("/helloAxios?info=tom").then(function (response){
                     //response 代表服务器响应对象
                     //response.data 代表服务器响应的数据
                     alert(response.data);
                 })
             },
             f2(){
                 //发出异步post请求
                 //在处理的方法参数中添加 @RequestBody 注解接收post请求的参数
                 axios.post("/helloAxios",{info:"孙慧德"}).then(function (response) {
                     alert(response.data);
                 })
             }
         }
     })
 </script>
</body>
</html>